<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if,v-show,v-for 指令</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- if 直接从dom元素销毁 -->
		<div v-if="show">hello world if </div>
		<!-- if display: none; 直接隐藏 -->
		<div v-show="show">hello world show </div>
		<button @click="handlerClick">toggle</button>
		
		<ul>
			<li v-for="item of list">{{item}}</li>
		</ul>
		
		<ul>
			<li v-for="(item,index) of list" :key="index">{{item}}</li>
		</ul>
	</div>
	<script>
		new Vue({
			el:"#root",
			data:{
				show: true,
				list: [1,2,3]
			},
			methods:{
				handlerClick: function(){
					this.show = !this.show
				}
			}
		})
	</script>
</body>
</html>